
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Protable - Admin Dashboard Template</title>

    <!-- Favicon -->
    <link rel="shortcut icon" href="assets/media/image/favicon.png"/>

    <!-- Plugin styles -->
    <link rel="stylesheet" href="vendors/bundle.css" type="text/css">

    <!-- quill -->
    <link href="vendors/quill/quill.snow.css" rel="stylesheet" type="text/css">

    <!-- Tagsinput -->
    <link rel="stylesheet" href="vendors/tagsinput/bootstrap-tagsinput.css" type="text/css">

    <!-- App styles -->
    <link rel="stylesheet" href="assets/css/app.min.css" type="text/css">
</head>
<body class="stretch-layout sticky-navigation">

<!-- begin::preloader-->
<div class="preloader">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="50px" height="50px" viewBox="0 0 128 128"
         xml:space="preserve">
        <rect x="0" y="0" width="100%" height="100%" fill="#FFFFFF"/>
        <g>
            <path d="M75.4 126.63a11.43 11.43 0 0 1-2.1-22.65 40.9 40.9 0 0 0 30.5-30.6 11.4 11.4 0 1 1 22.27 4.87h.02a63.77 63.77 0 0 1-47.8 48.05v-.02a11.38 11.38 0 0 1-2.93.37z"
                  fill="#000000" fill-opacity="1"/>
            <animateTransform attributeName="transform" type="rotate" from="0 64 64" to="360 64 64"
                              dur="500ms" repeatCount="indefinite">
            </animateTransform>
        </g>
    </svg>
</div>
<!-- end::preloader -->

<!-- begin::navigation -->
<div class="navigation">

    <!-- begin::logo -->
    <div id="logo">
        <a href="index.html">
            <img class="logo" src="assets/media/image/logo.png" alt="logo">
            <img class="logo-sm" src="assets/media/image/logo-sm.png" alt="small logo">
            <img class="logo-dark" src="assets/media/image/logo-dark.png" alt="dark logo">
        </a>
    </div>
    <!-- end::logo -->

    <!-- begin::navigation header -->
    <header class="navigation-header">
        <figure class="avatar avatar-state-success">
            <img src="assets/media/image/user/man_avatar3.jpg" class="rounded-circle" alt="image">
        </figure>
        <div>
            <h5>Nikos Pedlow</h5>
            <p class="text-muted">Administrator</p>
            <ul class="nav">
                <li class="nav-item">
                    <a href="profile.html" class="btn nav-link bg-info-bright" title="Profile" data-toggle="tooltip">
                        <i data-feather="user"></i>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="btn nav-link bg-success-bright" title="Settings" data-toggle="tooltip">
                        <i data-feather="settings"></i>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="login.html" class="btn nav-link bg-danger-bright" title="Logout" data-toggle="tooltip">
                        <i data-feather="log-out"></i>
                    </a>
                </li>
            </ul>
        </div>
    </header>
    <!-- end::navigation header -->

    <!-- begin::navigation menu -->
    <div class="navigation-menu-body">
        <ul>
            <li class="navigation-divider">Main</li>
            <li>
                <a href="index.html">
                    <i class="nav-link-icon" data-feather="bar-chart-2"></i>
                    <span>Dashboard</span>
                </a>
                <ul>
                    <li><a href="index.html">Dashboard 1</a></li>
                    <li><a href="dashboard-two.html">Dashboard 2</a></li>
                </ul>
            </li>
            <li>
                <a href="chat.html">
                    <i class="nav-link-icon" data-feather="message-circle"></i>
                    <span>Chat</span>
                    <span class="badge badge-danger">2</span>
                </a>
            </li>
            <li>
                <a class="active" href="inbox.html">
                    <i class="nav-link-icon" data-feather="mail"></i>
                    <span>Mail</span>
                    <span class="badge badge-success">2</span>
                </a>
            </li>
            <li>
                <a href="app-todo.html">
                    <i class="nav-link-icon" data-feather="check-circle"></i>
                    <span>Todo</span>
                    <span class="badge badge-warning">2</span>
                </a>
            </li>
            <li>
                <a href="file-manager.html">
                    <i class="nav-link-icon" data-feather="file"></i>
                    <span>File Manager</span>
                </a>
            </li>
            <li>
                <a href="calendar.html">
                    <i class="nav-link-icon" data-feather="calendar"></i>
                    <span>Calendar</span>
                </a>
            </li>
            <li class="navigation-divider">UI Elements</li>
            <li>
                <a href="#">
                    <i class="nav-link-icon" data-feather="monitor"></i>
                    <span>Components</span>
                </a>
                <ul>
                    <li>
                        <a href="#">Basic</a>
                        <ul>
                            <li><a href="alerts.html">Alert</a></li>
                            <li><a href="accordion.html">Accordion</a></li>
                            <li><a href="buttons.html">Buttons</a></li>
                            <li><a href="dropdown.html">Dropdown</a></li>
                            <li><a href="list-group.html">List Group</a></li>
                            <li><a href="pagination.html">Pagination</a></li>
                            <li><a href="typography.html">Typography</a></li>
                            <li><a href="media-object.html">Media Object</a></li>
                            <li><a href="progress.html">Progress</a></li>
                            <li><a href="modal.html">Modal</a></li>
                            <li><a href="spinners.html">Spinners</a></li>
                            <li><a href="navs.html">Navs</a></li>
                            <li><a href="tab.html">Tab</a></li>
                            <li><a href="tooltip.html">Tooltip</a></li>
                            <li><a href="popovers.html">Popovers</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Cards</a>
                        <ul>
                            <li><a href="basic-cards.html">Basic Cards </a></li>
                            <li><a href="image-cards.html">Image Cards </a></li>
                            <li><a href="card-scroll.html">Card Scroll </a></li>
                            <li><a href="other-cards.html">Others </a></li>
                        </ul>
                    </li>
                    <li><a href="avatar.html">Avatar</a></li>
                    <li><a href="icons.html">Icons</a></li>
                    <li><a href="colors.html">Colors</a></li>
                </ul>
            </li>
            <li>
                <a href="#">
                    <i class="nav-link-icon" data-feather="globe"></i>
                    <span>Plugins</span>
                </a>
                <ul>
                    <li><a href="sweet-alert.html">Sweet Alert</a></li>
                    <li><a href="lightbox.html">Lightbox</a></li>
                    <li><a href="toast.html">Toast</a></li>
                    <li><a href="tour.html">Tour</a></li>
                    <li><a href="slick-slide.html">Slick Slide</a></li>
                    <li><a href="nestable.html">Nestable</a></li>
                </ul>
            </li>
            <li>
                <a href="#">
                    <i class="nav-link-icon" data-feather="mouse-pointer"></i>
                    <span>Forms</span>
                </a>
                <ul>
                    <li><a href="basic-form.html">Form Layouts</a></li>
                    <li><a href="custom-form.html">Custom Forms</a></li>
                    <li><a href="advanced-form.html">Advanced Form</a></li>
                    <li><a href="form-validation.html">Validation</a></li>
                    <li><a href="form-wizard.html">Wizard</a></li>
                    <li><a href="file-upload.html">File Upload</a></li>
                    <li><a href="datepicker.html">Datepicker</a></li>
                    <li><a href="timepicker.html">Timepicker</a></li>
                    <li><a href="colorpicker.html">Colorpicker</a></li>
                </ul>
            </li>
            <li>
                <a href="#">
                    <i class="nav-link-icon" data-feather="grid"></i>
                    <span>Tables</span>
                </a>
                <ul>
                    <li><a href="tables.html">Basic Tables</a></li>
                    <li><a href="data-table.html">Datatable</a></li>
                    <li><a href="responsive-table.html">Responsive Tables</a></li>
                </ul>
            </li>
            <li>
                <a href="#">
                    <i class="nav-link-icon" data-feather="pie-chart"></i>
                    <span>Charts</span>
                </a>
                <ul>
                    <li><a href="apexchart.html">Apex</a></li>
                    <li><a href="chartjs.html">Chartjs</a></li>
                    <li><a href="justgage.html">Justgage</a></li>
                    <li><a href="morsis.html">Morsis</a></li>
                    <li><a href="peity.html">Peity</a></li>
                </ul>
            </li>
            <li>
                <a href="#">
                    <i class="nav-link-icon" data-feather="map-pin"></i>
                    <span>Maps</span>
                </a>
                <ul>
                    <li><a href="google-map.html">Google</a></li>
                    <li><a href="vector-map.html">Vector</a></li>
                </ul>
            </li>
            <li class="navigation-divider">Extras</li>
            <li>
                <a href="#">
                    <i class="nav-link-icon" data-feather="user"></i>
                    <span>Authentication</span>
                </a>
                <ul>
                    <li><a href="login.html">Login</a></li>
                    <li><a href="register.html">Register</a></li>
                    <li><a href="recover-password.html">Recovery Password</a></li>
                    <li><a href="lock-screen.html">Lock Screen</a></li>
                </ul>
            </li>
            <li>
                <a href="#">
                    <i class="nav-link-icon" data-feather="copy"></i>
                    <span>Pages</span>
                </a>
                <ul>
                    <li><a href="profile.html">Profile</a></li>
                    <li><a href="timeline.html">Timeline</a></li>
                    <li><a href="invoice.html">Invoice</a></li>

                    <li><a href="pricing-table.html">Pricing Table</a></li>
                    <li><a href="search-result.html">Search Result</a></li>
                    <li>
                        <a href="#">Error Pages</a>
                        <ul>
                            <li><a href="404.html">404</a></li>
                            <li><a href="404-2.html">404 V2</a></li>
                            <li><a href="503.html">503</a></li>
                            <li><a href="mean-at-work.html">Mean at Work</a></li>
                        </ul>
                    </li>
                    <li><a href="blank-page.html">Starter Page</a></li>
                </ul>
            </li>
            <li>
                <a href="#">
                    <i class="nav-link-icon" data-feather="send"></i>
                    <span>Email Templates</span>
                </a>
                <ul>
                    <li><a href="email-template-basic.html">Basic</a></li>
                    <li><a href="email-template-alert.html">Alert</a></li>
                    <li><a href="email-template-billing.html">Billing</a></li>
                </ul>
            </li>
            <li>
                <a href="#">
                    <i class="nav-link-icon" data-feather="menu"></i>
                    <span>Menu Level</span>
                </a>
                <ul>
                    <li>
                        <a href="#">Menu Level</a>
                        <ul>
                            <li>
                                <a href="#">Menu Level </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <!-- end::navigation menu -->

</div>
<!-- end::navigation -->

<!-- begin::main -->
<div id="main">

    <!-- begin::header -->
    <div class="header">

        <!-- begin::header left -->
        <ul class="navbar-nav">

            <!-- begin::navigation-toggler -->
            <li class="nav-item navigation-toggler">
                <a href="#" class="nav-link">
                    <i data-feather="menu"></i>
                </a>
            </li>
            <!-- end::navigation-toggler -->

            <!-- begin::header-logo -->
            <li class="nav-item" id="header-logo">
                <a href="index.html">
                    <img class="logo" src="assets/media/image/logo.png" alt="logo">
                    <img class="logo-sm" src="assets/media/image/logo-sm.png" alt="small logo">
                    <img class="logo-dark" src="assets/media/image/logo-dark.png" alt="dark logo">
                </a>
            </li>
            <!-- end::header-logo -->
        </ul>
        <!-- end::header left -->

        <!-- begin::header-right -->
        <div class="header-right">
            <ul class="navbar-nav">

                <!-- begin::search-form -->
                <li class="nav-item search-form">
                    <div class="row">
                        <div class="col-md-6">
                            <form>
                                <div class="input-group">
                                    <input type="text" class="form-control" placeholder="Search">
                                    <div class="input-group-append">
                                        <button class="btn btn-default" type="button">
                                            <i data-feather="search"></i>
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </li>
                <!-- end::search-form -->

                <!-- begin::header minimize/maximize -->
                <li class="nav-item dropdown">
                    <a href="#" class="nav-link" title="Fullscreen" data-toggle="fullscreen">
                        <i class="maximize" data-feather="maximize"></i>
                        <i class="minimize" data-feather="minimize"></i>
                    </a>
                </li>
                <!-- end::header minimize/maximize -->

                <!-- begin::header app list -->
                <li class="nav-item dropdown">
                    <a href="#" class="nav-link" title="Apps" data-toggle="dropdown">
                        <i data-feather="grid"></i>
                    </a>
                    <div class="dropdown-menu dropdown-menu-right dropdown-menu-big">
                        <div class="p-3">
                            <h6 class="text-uppercase font-size-11 mb-3">Web Apps</h6>
                            <div class="row row-xs">
                                <div class="col-6">
                                    <a href="chat.html">
                                        <div class="text-uppercase font-size-11 p-3 border-radius-1 border text-center mb-3">
                                            <i class="text-success width-23 height-23" data-feather="message-circle"></i>
                                            <div class="mt-2">Chat</div>
                                        </div>
                                    </a>
                                </div>
                                <div class="col-6">
                                    <a href="inbox.html">
                                        <div class="text-uppercase font-size-11 p-3 border-radius-1 border text-center mb-3">
                                            <i class="text-info width-23 height-23" data-feather="mail"></i>
                                            <div class="mt-2">Mail</div>
                                        </div>
                                    </a>
                                </div>
                                <div class="col-6">
                                    <a href="calendar.html">
                                        <div class="text-uppercase font-size-11 p-3 border-radius-1 border text-center">
                                            <i class="text-warning width-23 height-23" data-feather="calendar"></i>
                                            <div class="mt-2">Calendar</div>
                                        </div>
                                    </a>
                                </div>
                                <div class="col-6">
                                    <a href="file-manager.html">
                                        <div class="text-uppercase font-size-11 p-3 border-radius-1 border text-center">
                                            <i class="text-danger width-23 height-23" data-feather="file"></i>
                                            <div class="mt-2">File Manager</div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <!-- end::header app list -->

                <!-- begin::header messages dropdown -->
                <li class="nav-item dropdown">
                    <a href="#" class="nav-link nav-link-notify" title="Messages" data-toggle="dropdown">
                        <i data-feather="message-circle"></i>
                    </a>
                    <div class="dropdown-menu dropdown-menu-right dropdown-menu-big">
                        <div class="p-4 text-center" data-backround-image="assets/media/image/image1.png">
                            <h6 class="mb-1">Messages</h6>
                            <small class="font-size-11 opacity-7">2 unread messages</small>
                        </div>
                        <div>
                            <ul class="list-group list-group-flush">
                                <li>
                                    <a href="#" class="list-group-item d-flex hide-show-toggler">
                                        <div>
                                            <figure class="avatar avatar-sm m-r-15">
                                                <img src="assets/media/image/user/man_avatar1.jpg"
                                                     class="rounded-circle" alt="user">
                                            </figure>
                                        </div>
                                        <div class="flex-grow-1">
                                            <p class="mb-0 line-height-20 d-flex justify-content-between">
                                                Herbie Pallatina
                                                <i title="Make unread" data-toggle="tooltip"
                                                   class="hide-show-toggler-item fa fa-circle-o font-size-11"></i>
                                            </p>
                                            <div class="small text-muted">
                                                <span class="mr-2">02:30 PM</span>
                                                <span>Have you madimage</span>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#"
                                       class="list-group-item d-flex align-items-center hide-show-toggler">
                                        <div>
                                            <figure class="avatar avatar-sm m-r-15">
                                                <img src="assets/media/image/user/women_avatar5.jpg"
                                                     class="rounded-circle" alt="user">
                                            </figure>
                                        </div>
                                        <div class="flex-grow-1">
                                            <p class="mb-0 line-height-20 d-flex justify-content-between">
                                                Andrei Miners
                                                <i title="Make unread" data-toggle="tooltip"
                                                   class="hide-show-toggler-item fa fa-circle-o font-size-11"></i>
                                            </p>
                                            <div class="small text-muted">
                                                <span class="mr-2">08:36 PM</span>
                                                <span>I have a meetinimage</span>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li class="text-divider small pb-2 pl-3 pt-3">
                                    <span>Old chats</span>
                                </li>
                                <li>
                                    <a href="#"
                                       class="list-group-item d-flex align-items-center hide-show-toggler">
                                        <div>
                                            <figure class="avatar avatar-sm m-r-15">
                                                <img src="assets/media/image/user/man_avatar3.jpg"
                                                     class="rounded-circle" alt="user">
                                            </figure>
                                        </div>
                                        <div class="flex-grow-1">
                                            <p class="mb-0 line-height-20 d-flex justify-content-between">
                                                Kevin added
                                                <i title="Make unread" data-toggle="tooltip"
                                                   class="hide-show-toggler-item fa fa-check font-size-11"></i>
                                            </p>
                                            <div class="small text-muted">
                                                <span class="mr-2">11:09 PM</span>
                                                <span>Have you madimage</span>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="list-group-item d-flex hide-show-toggler">
                                        <div>
                                            <figure class="avatar avatar-sm m-r-15">
                                                <img src="assets/media/image/user/man_avatar2.jpg"
                                                     class="rounded-circle" alt="user">
                                            </figure>
                                        </div>
                                        <div class="flex-grow-1">
                                            <p class="mb-0 line-height-20 d-flex justify-content-between">
                                                Eugenio Carnelley
                                                <i title="Mark as read" data-toggle="tooltip"
                                                   class="hide-show-toggler-item fa fa-check font-size-11"></i>
                                            </p>
                                            <div class="small text-muted">
                                                <span class="mr-2">Yesterday</span>
                                                <span>I have a meetinimage</span>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#"
                                       class="list-group-item d-flex align-items-center hide-show-toggler">
                                        <div>
                                            <figure class="avatar avatar-sm m-r-15">
                                                <img src="assets/media/image/user/women_avatar1.jpg"
                                                     class="rounded-circle" alt="user">
                                            </figure>
                                        </div>
                                        <div class="flex-grow-1">
                                            <p class="mb-0 line-height-20 d-flex justify-content-between">
                                                Neely Ferdinand
                                                <i title="Make unread" data-toggle="tooltip"
                                                   class="hide-show-toggler-item fa fa-check font-size-11"></i>
                                            </p>
                                            <div class="small text-muted">
                                                <span class="mr-2">Yesterday</span>
                                                <span>I have a meetinimage</span>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="p-2 text-right">
                            <ul class="list-inline small">
                                <li class="list-inline-item">
                                    <a href="#">Mark All Read</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                <!-- end::header messages dropdown -->

                <!-- begin::header notification dropdown -->
                <li class="nav-item dropdown">
                    <a href="#" class="nav-link nav-link-notify" title="Notifications" data-toggle="dropdown">
                        <i data-feather="bell"></i>
                    </a>
                    <div class="dropdown-menu dropdown-menu-right dropdown-menu-big">
                        <div class="p-4 text-center" data-backround-image="assets/media/image/image1.png">
                            <h6 class="mb-1">Notifications</h6>
                            <small class="font-size-11 opacity-7">1 unread notifications</small>
                        </div>
                        <div>
                            <ul class="list-group list-group-flush">
                                <li>
                                    <a href="#" class="list-group-item d-flex hide-show-toggler">
                                        <div>
                                            <figure class="avatar avatar-sm m-r-15">
                                                <span class="avatar-title bg-success-bright text-success rounded-circle">
                                                    <i class="ti-user"></i>
                                                </span>
                                            </figure>
                                        </div>
                                        <div class="flex-grow-1">
                                            <p class="mb-0 line-height-20 d-flex justify-content-between">
                                                New customer registered
                                                <i title="Make unread" data-toggle="tooltip"
                                                   class="hide-show-toggler-item fa fa-circle-o font-size-11"></i>
                                            </p>
                                            <span class="text-muted small">20 min ago</span>
                                        </div>
                                    </a>
                                </li>
                                <li class="text-divider small pb-2 pl-3 pt-3">
                                    <span>Old notifications</span>
                                </li>
                                <li>
                                    <a href="#" class="list-group-item d-flex hide-show-toggler">
                                        <div>
                                            <figure class="avatar avatar-sm m-r-15">
                                                <span class="avatar-title bg-warning-bright text-warning rounded-circle">
                                                    <i class="ti-package"></i>
                                                </span>
                                            </figure>
                                        </div>
                                        <div class="flex-grow-1">
                                            <p class="mb-0 line-height-20 d-flex justify-content-between">
                                                New Order Recieved
                                                <i title="Mark as read" data-toggle="tooltip"
                                                   class="hide-show-toggler-item fa fa-check font-size-11"></i>
                                            </p>
                                            <span class="text-muted small">45 sec ago</span>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#"
                                       class="list-group-item d-flex align-items-center hide-show-toggler">
                                        <div>
                                            <figure class="avatar avatar-sm m-r-15">
                                                <span class="avatar-title bg-danger-bright text-danger rounded-circle">
                                                    <i class="ti-server"></i>
                                                </span>
                                            </figure>
                                        </div>
                                        <div class="flex-grow-1">
                                            <p class="mb-0 line-height-20 d-flex justify-content-between">
                                                Server Limit Reached!
                                                <i title="Make unread" data-toggle="tooltip"
                                                   class="hide-show-toggler-item fa fa-check font-size-11"></i>
                                            </p>
                                            <span class="text-muted small">55 sec ago</span>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#"
                                       class="list-group-item d-flex align-items-center hide-show-toggler">
                                        <div>
                                            <figure class="avatar avatar-sm m-r-15">
                                                <span class="avatar-title bg-info-bright text-info rounded-circle">
                                                    <i class="ti-layers"></i>
                                                </span>
                                            </figure>
                                        </div>
                                        <div class="flex-grow-1">
                                            <p class="mb-0 line-height-20 d-flex justify-content-between">
                                                Apps are ready for update
                                                <i title="Make unread" data-toggle="tooltip"
                                                   class="hide-show-toggler-item fa fa-check font-size-11"></i>
                                            </p>
                                            <span class="text-muted small">Yesterday</span>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="p-2 text-right">
                            <ul class="list-inline small">
                                <li class="list-inline-item">
                                    <a href="#">Mark All Read</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                <!-- end::header notification dropdown -->
            </ul>

            <!-- begin::mobile header toggler -->
            <ul class="navbar-nav d-flex align-items-center">
                <li class="nav-item header-toggler">
                    <a href="#" class="nav-link">
                        <i data-feather="arrow-down"></i>
                    </a>
                </li>
            </ul>
            <!-- end::mobile header toggler -->
        </div>
        <!-- end::header-right -->
    </div>
    <!-- end::header -->

    <!-- begin::main-content -->
    <main class="main-content">

        <div class="row app-block">
            <div class="col-md-3 app-sidebar">
                <div class="card">
                    <div class="card-body">
                        <button class="btn btn-primary btn-block" data-toggle="modal" data-target="#compose">
                            <i data-feather="plus" class="mr-2"></i>
                            Compose Email
                        </button>
                    </div>
                    <div class="app-sidebar-menu">
                        <div class="list-group list-group-flush">
                            <a href="" class="list-group-item active d-flex align-items-center">
                                <i data-feather="mail" class="mr-2 width-15 height-15"></i>
                                Inbox
                                <span class="small ml-auto">14</span>
                            </a>
                            <a href="" class="list-group-item">
                                <i data-feather="send" class="mr-2 width-15 height-15"></i>
                                Send
                            </a>
                            <a href="" class="list-group-item">
                                <i data-feather="edit-3" class="mr-2 width-15 height-15"></i>
                                Draft
                            </a>
                            <a href="" class="list-group-item d-flex align-items-center">
                                <i data-feather="star" class="mr-2 width-15 height-15"></i>
                                Starred
                                <span class="small ml-auto">10</span>
                            </a>
                            <a href="" class="list-group-item">
                                <i data-feather="info" class="mr-2 width-15 height-15"></i>
                                Spam
                            </a>
                            <a href="" class="list-group-item d-flex align-items-center">
                                <i data-feather="trash" class="mr-2 width-15 height-15"></i>
                                Trash
                                <span class="small ml-auto">2</span>
                            </a>
                        </div>
                        <div class="card-body">
                            <h6 class="mb-0">Labels</h6>
                        </div>
                        <div class="list-group list-group-flush">
                            <a href="#" class="list-group-item d-flex align-items-center">
                                <span class="text-warning fa fa-circle mr-2"></span>
                                Theme Support
                                <span class="small ml-auto">5</span>
                            </a>
                            <a href="#" class="list-group-item d-flex align-items-center">
                                <span class="text-success fa fa-circle mr-2"></span>
                                Freelance
                            </a>
                            <a href="#" class="list-group-item d-flex align-items-center">
                                <span class="text-danger fa fa-circle mr-2"></span>
                                Social
                            </a>
                            <a href="#" class="list-group-item d-flex align-items-center">
                                <span class="text-info fa fa-circle mr-2"></span>
                                Friends
                            </a>
                            <a href="#" class="list-group-item d-flex align-items-center">
                                <span class="text-secondary fa fa-circle mr-2"></span>
                                Coding
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-9 app-content">
                <div class="app-content-overlay"></div>
                <div class="app-action">
                    <div class="action-left">
                        <div class="custom-control custom-checkbox mr-3">
                            <input type="checkbox" class="custom-control-input" id="customCheckAll">
                            <label class="custom-control-label" for="customCheckAll"></label>
                        </div>
                        <ul class="list-inline">
                            <li class="list-inline-item mb-0">
                                <a href="#" class="btn btn-outline-light dropdown-toggle" data-toggle="dropdown">
                                    With selected
                                </a>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">Mark as read</a>
                                    <a class="dropdown-item" href="#">Mark as unread</a>
                                    <a class="dropdown-item" href="#">Spam</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item text-danger" href="#">Delete</a>
                                </div>
                            </li>
                            <li class="list-inline-item mb-0">
                                <a href="#" class="btn btn-outline-light dropdown-toggle" data-toggle="dropdown">
                                    Order by
                                </a>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <a class="dropdown-item" href="#">Date</a>
                                    <a class="dropdown-item" href="#">From</a>
                                    <a class="dropdown-item" href="#">Subject</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Size</a>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="action-right">
                        <form class="d-flex mr-3">
                            <a href="#" class="app-sidebar-menu-button btn btn-outline-light">
                                <i data-feather="menu" class="width-15 height-15"></i>
                            </a>
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="Email search"
                                       aria-describedby="button-addon1">
                                <div class="input-group-append">
                                    <button class="btn btn-outline-light" type="button" id="button-addon1">
                                        <i class="ti-search"></i>
                                    </button>
                                </div>
                            </div>
                        </form>
                        <div class="app-pager d-flex align-items-center">
                            <div class="mr-3">1-50 of 253</div>
                            <nav aria-label="Page navigation example">
                                <ul class="pagination">
                                    <li class="page-item">
                                        <a class="page-link" href="#" aria-label="Previous">
                                            <i data-feather="chevron-left" class="width-15 height-15"></i>
                                        </a>
                                    </li>
                                    <li class="page-item">
                                        <a class="page-link" href="#" aria-label="Next">
                                            <i data-feather="chevron-right" class="width-15 height-15"></i>
                                        </a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
                <div class="card card-body app-content-body">
                    <div class="app-lists">
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">
                                <div>
                                    <div class="custom-control custom-checkbox mr-2">
                                        <input type="checkbox" class="custom-control-input" id="customCheck1">
                                        <label class="custom-control-label" for="customCheck1"></label>
                                    </div>
                                </div>
                                <div>
                                    <a href="#" class="add-star mr-3" title="Add stars">
                                        <i class="fa fa-star-o font-size-16"></i>
                                    </a>
                                </div>
                                <div>
                                    <figure class="avatar avatar-sm mr-3">
                                        <img src="assets/media/image/user/man_avatar5.jpg" class="rounded-circle" alt="image">
                                    </figure>
                                </div>
                                <div class="flex-grow-1 min-width-0">
                                    <div class="mb-1 d-flex justify-content-between align-items-center">
                                        <div class="text-truncate app-list-title">Lucas Kriebel (via Twitter)</div>
                                        <div class="pl-3 d-flex">
                                            <span class="text-nowrap text-muted">15 July</span>
                                            <div class="dropdown ml-3">
                                                <a href="#" class="btn btn-outline-light btn-sm" data-toggle="dropdown">
                                                    <i class="fa fa-ellipsis-v"></i>
                                                </a>
                                                <div class="dropdown-menu dropdown-menu-right">
                                                    <a class="dropdown-item" href="#">Reply</a>
                                                    <a class="dropdown-item" href="#">Add star</a>
                                                    <a class="dropdown-item" href="#">Add label</a>
                                                    <div class="dropdown-divider"></div>
                                                    <a class="dropdown-item text-danger" href="#">Delete</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="text-muted d-flex justify-content-between">
                                        <div class="text-truncate small">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, labore?</div>
                                        <div class="text-nowrap pl-3">
                                            <ul class="list-inline">
                                                <li class="list-inline-item mb-0">
                                                    <i class="fa fa-circle text-danger"></i>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="list-group-item active">
                                <div>
                                    <div class="custom-control custom-checkbox mr-2">
                                        <input type="checkbox" class="custom-control-input" checked id="customCheck2">
                                        <label class="custom-control-label" for="customCheck2"></label>
                                    </div>
                                </div>
                                <div>
                                    <a href="#" class="add-star mr-3" title="Add stars">
                                        <i class="fa fa-star font-size-16 text-warning"></i>
                                    </a>
                                </div>
                                <div>
                                    <figure class="avatar avatar-sm mr-3">
                                        <span class="avatar-title bg-info-bright text-info rounded-circle">Z</span>
                                    </figure>
                                </div>
                                <div class="flex-grow-1 min-width-0">
                                    <div class="mb-1 d-flex justify-content-between align-items-center">
                                        <div class="text-truncate app-list-title">Ecommerce website Paypal integration 😃</div>
                                        <div class="pl-3 d-flex">
                                            <span class="text-nowrap text-muted">15 July</span>
                                            <div class="dropdown ml-3">
                                                <a href="#" class="btn btn-outline-light btn-sm" data-toggle="dropdown">
                                                    <i class="fa fa-ellipsis-v"></i>
                                                </a>
                                                <div class="dropdown-menu dropdown-menu-right">
                                                    <a class="dropdown-item" href="#">Reply</a>
                                                    <a class="dropdown-item" href="#">Add star</a>
                                                    <a class="dropdown-item" href="#">Add label</a>
                                                    <div class="dropdown-divider"></div>
                                                    <a class="dropdown-item text-danger" href="#">Delete</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="text-muted d-flex justify-content-between">
                                        <div class="text-truncate small">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
                                        <div class="text-nowrap pl-3">
                                            <ul class="list-inline">
                                                <li class="list-inline-item mb-0">
                                                    <a href="#" data-toggle="tooltip" title="Attachment">
                                                        <i class="fa fa-paperclip"></i>
                                                    </a>
                                                </li>
                                                <li class="list-inline-item mb-0">
                                                    <i class="fa fa-circle text-success"></i>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="list-group-item">
                                <div>
                                    <div class="custom-control custom-checkbox mr-2">
                                        <input type="checkbox" class="custom-control-input" id="customCheck3">
                                        <label class="custom-control-label" for="customCheck3"></label>
                                    </div>
                                </div>
                                <div>
                                    <a href="#" class="add-star mr-3" title="Add stars">
                                        <i class="fa fa-star-o font-size-16"></i>
                                    </a>
                                </div>
                                <div>
                                    <figure class="avatar avatar-sm mr-3">
                                        <span class="avatar-title bg-danger-bright text-danger rounded-circle">S</span>
                                    </figure>
                                </div>
                                <div class="flex-grow-1 min-width-0">
                                    <div class="mb-1 d-flex justify-content-between align-items-center">
                                        <div class="text-truncate app-list-title">Randy, me (5)</div>
                                        <div class="pl-3 d-flex">
                                            <span class="text-nowrap text-muted">15 July</span>
                                            <div class="dropdown ml-3">
                                                <a href="#" class="btn btn-outline-light btn-sm" data-toggle="dropdown">
                                                    <i class="fa fa-ellipsis-v"></i>
                                                </a>
                                                <div class="dropdown-menu dropdown-menu-right">
                                                    <a class="dropdown-item" href="#">Reply</a>
                                                    <a class="dropdown-item" href="#">Add star</a>
                                                    <a class="dropdown-item" href="#">Add label</a>
                                                    <div class="dropdown-divider"></div>
                                                    <a class="dropdown-item text-danger" href="#">Delete</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="text-muted d-flex justify-content-between">
                                        <div class="text-truncate small">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis cumque dicta eligendi, in quasi recusandae.</div>
                                        <div class="text-nowrap pl-3">
                                            <ul class="list-inline">
                                                <li class="list-inline-item mb-0">
                                                    <a href="#" data-toggle="tooltip" title="Attachment">
                                                        <i class="fa fa-paperclip"></i>
                                                    </a>
                                                </li>
                                                <li class="list-inline-item mb-0">
                                                    <i class="fa fa-circle text-info"></i>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="list-group-item">
                                <div>
                                    <div class="custom-control custom-checkbox mr-2">
                                        <input type="checkbox" class="custom-control-input" id="customCheck4">
                                        <label class="custom-control-label" for="customCheck4"></label>
                                    </div>
                                </div>
                                <div>
                                    <a href="#" class="add-star mr-3" title="Add stars">
                                        <i class="fa fa-star-o font-size-16"></i>
                                    </a>
                                </div>
                                <div>
                                    <figure class="avatar avatar-sm mr-3">
                                        <img src="assets/media/image/user/women_avatar3.jpg" class="rounded-circle" alt="image">
                                    </figure>
                                </div>
                                <div class="flex-grow-1 min-width-0">
                                    <div class="mb-1 d-flex justify-content-between align-items-center">
                                        <div class="text-truncate app-list-title">Andrew Zimmer ❤❤</div>
                                        <div class="pl-3 d-flex">
                                            <span class="text-nowrap text-muted">15 July</span>
                                            <div class="dropdown ml-3">
                                                <a href="#" class="btn btn-outline-light btn-sm" data-toggle="dropdown">
                                                    <i class="fa fa-ellipsis-v"></i>
                                                </a>
                                                <div class="dropdown-menu dropdown-menu-right">
                                                    <a class="dropdown-item" href="#">Reply</a>
                                                    <a class="dropdown-item" href="#">Add star</a>
                                                    <a class="dropdown-item" href="#">Add label</a>
                                                    <div class="dropdown-divider"></div>
                                                    <a class="dropdown-item text-danger" href="#">Delete</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="text-muted d-flex justify-content-between">
                                        <div class="text-truncate small">Lorem ipsum dolor sit amet.</div>
                                        <div class="text-nowrap pl-3">
                                            <ul class="list-inline">
                                                <li class="list-inline-item mb-0">
                                                    <i class="fa fa-circle text-secondary"></i>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="list-group-item">
                                <div>
                                    <div class="custom-control custom-checkbox mr-2">
                                        <input type="checkbox" class="custom-control-input" id="customCheck5">
                                        <label class="custom-control-label" for="customCheck5"></label>
                                    </div>
                                </div>
                                <div>
                                    <a href="#" class="add-star mr-3" title="Add stars">
                                        <i class="fa fa-star font-size-16 text-warning"></i>
                                    </a>
                                </div>
                                <div>
                                    <figure class="avatar avatar-sm mr-3">
                                        <span class="avatar-title bg-info-bright text-info rounded-circle">Z</span>
                                    </figure>
                                </div>
                                <div class="flex-grow-1 min-width-0">
                                    <div class="mb-1 d-flex justify-content-between align-items-center">
                                        <div class="text-truncate app-list-title">Charukaw, me (7)</div>
                                        <div class="pl-3 d-flex">
                                            <span class="text-nowrap text-muted">15 July</span>
                                            <div class="dropdown ml-3">
                                                <a href="#" class="btn btn-outline-light btn-sm" data-toggle="dropdown">
                                                    <i class="fa fa-ellipsis-v"></i>
                                                </a>
                                                <div class="dropdown-menu dropdown-menu-right">
                                                    <a class="dropdown-item" href="#">Reply</a>
                                                    <a class="dropdown-item" href="#">Add star</a>
                                                    <a class="dropdown-item" href="#">Add label</a>
                                                    <div class="dropdown-divider"></div>
                                                    <a class="dropdown-item text-danger" href="#">Delete</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="text-muted d-flex justify-content-between">
                                        <div class="text-truncate small">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores esse et hic nesciunt quas ratione rem reprehenderit similique temporibus totam!</div>
                                        <div class="text-nowrap pl-3">
                                            <ul class="list-inline">
                                                <li class="list-inline-item mb-0">
                                                    <i class="fa fa-circle text-primary"></i>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="list-group-item">
                                <div>
                                    <div class="custom-control custom-checkbox mr-2">
                                        <input type="checkbox" class="custom-control-input" id="customCheck6">
                                        <label class="custom-control-label" for="customCheck6"></label>
                                    </div>
                                </div>
                                <div>
                                    <a href="#" class="add-star mr-3" title="Add stars">
                                        <i class="fa fa-star-o font-size-16"></i>
                                    </a>
                                </div>
                                <div>
                                    <figure class="avatar avatar-sm mr-3">
                                        <span class="avatar-title bg-danger-bright text-danger rounded-circle">S</span>
                                    </figure>
                                </div>
                                <div class="flex-grow-1 min-width-0">
                                    <div class="mb-1 d-flex justify-content-between align-items-center">
                                        <div class="text-truncate app-list-title">Stack Exchange</div>
                                        <div class="pl-3 d-flex">
                                            <span class="text-nowrap text-muted">15 July</span>
                                            <div class="dropdown ml-3">
                                                <a href="#" class="btn btn-outline-light btn-sm" data-toggle="dropdown">
                                                    <i class="fa fa-ellipsis-v"></i>
                                                </a>
                                                <div class="dropdown-menu dropdown-menu-right">
                                                    <a class="dropdown-item" href="#">Reply</a>
                                                    <a class="dropdown-item" href="#">Add star</a>
                                                    <a class="dropdown-item" href="#">Add label</a>
                                                    <div class="dropdown-divider"></div>
                                                    <a class="dropdown-item text-danger" href="#">Delete</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="text-muted d-flex justify-content-between">
                                        <div class="text-truncate small">Lorem ipsum dolor sit amet.</div>
                                        <div class="text-nowrap pl-3">
                                            <ul class="list-inline">
                                                <li class="list-inline-item mb-0">
                                                    <i class="fa fa-circle text-warning"></i>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="list-group-item">
                                <div>
                                    <div class="custom-control custom-checkbox mr-2">
                                        <input type="checkbox" class="custom-control-input" id="customCheck7">
                                        <label class="custom-control-label" for="customCheck7"></label>
                                    </div>
                                </div>
                                <div>
                                    <a href="#" class="add-star mr-3" title="Add stars">
                                        <i class="fa fa-star-o font-size-16"></i>
                                    </a>
                                </div>
                                <div>
                                    <figure class="avatar avatar-sm mr-3">
                                        <span class="avatar-title bg-success-bright text-success rounded-circle">K</span>
                                    </figure>
                                </div>
                                <div class="flex-grow-1 min-width-0">
                                    <div class="mb-1 d-flex justify-content-between align-items-center">
                                        <div class="text-truncate app-list-title">Facebook register completed 👍</div>
                                        <div class="pl-3 d-flex">
                                            <span class="text-nowrap text-muted">15 July</span>
                                            <div class="dropdown ml-3">
                                                <a href="#" class="btn btn-outline-light btn-sm" data-toggle="dropdown">
                                                    <i class="fa fa-ellipsis-v"></i>
                                                </a>
                                                <div class="dropdown-menu dropdown-menu-right">
                                                    <a class="dropdown-item" href="#">Reply</a>
                                                    <a class="dropdown-item" href="#">Add star</a>
                                                    <a class="dropdown-item" href="#">Add label</a>
                                                    <div class="dropdown-divider"></div>
                                                    <a class="dropdown-item text-danger" href="#">Delete</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="text-muted d-flex justify-content-between">
                                        <div class="text-truncate small">Hey John, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, esse.
                                        </div>
                                        <div class="text-nowrap pl-3">
                                            <ul class="list-inline">
                                                <li class="list-inline-item mb-0">
                                                    <i class="fa fa-circle text-success"></i>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="list-group-item">
                                <div>
                                    <div class="custom-control custom-checkbox mr-2">
                                        <input type="checkbox" class="custom-control-input" id="customCheck8">
                                        <label class="custom-control-label" for="customCheck8"></label>
                                    </div>
                                </div>
                                <div>
                                    <a href="#" class="add-star mr-3" title="Add stars">
                                        <i class="fa fa-star font-size-16 text-warning"></i>
                                    </a>
                                </div>
                                <div>
                                    <figure class="avatar avatar-sm mr-3">
                                        <span class="avatar-title bg-info-bright text-info rounded-circle">Z</span>
                                    </figure>
                                </div>
                                <div class="flex-grow-1 min-width-0">
                                    <div class="mb-1 d-flex justify-content-between align-items-center">
                                        <div class="text-truncate app-list-title">Peter, me (3)</div>
                                        <div class="pl-3 d-flex">
                                            <span class="text-nowrap text-muted">15 July</span>
                                            <div class="dropdown ml-3">
                                                <a href="#" class="btn btn-outline-light btn-sm" data-toggle="dropdown">
                                                    <i class="fa fa-ellipsis-v"></i>
                                                </a>
                                                <div class="dropdown-menu dropdown-menu-right">
                                                    <a class="dropdown-item" href="#">Reply</a>
                                                    <a class="dropdown-item" href="#">Add star</a>
                                                    <a class="dropdown-item" href="#">Add label</a>
                                                    <div class="dropdown-divider"></div>
                                                    <a class="dropdown-item text-danger" href="#">Delete</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="text-muted d-flex justify-content-between">
                                        <div class="text-truncate small">Assumenda cupiditate dolor earum est illo labore nesciunt officia provident quis tempora?</div>
                                        <div class="text-nowrap pl-3">
                                            <ul class="list-inline">
                                                <li class="list-inline-item mb-0">
                                                    <a href="#" data-toggle="tooltip" title="Attachment">
                                                        <i class="fa fa-paperclip"></i>
                                                    </a>
                                                </li>
                                                <li class="list-inline-item mb-0">
                                                    <i class="fa fa-circle text-info"></i>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="list-group-item">
                                <div>
                                    <div class="custom-control custom-checkbox mr-2">
                                        <input type="checkbox" class="custom-control-input" id="customCheck9">
                                        <label class="custom-control-label" for="customCheck9"></label>
                                    </div>
                                </div>
                                <div>
                                    <a href="#" class="add-star mr-3" title="Add stars">
                                        <i class="fa fa-star-o font-size-16"></i>
                                    </a>
                                </div>
                                <div>
                                    <figure class="avatar avatar-sm mr-3">
                                        <span class="avatar-title bg-danger-bright text-danger rounded-circle">S</span>
                                    </figure>
                                </div>
                                <div class="flex-grow-1 min-width-0">
                                    <div class="mb-1 d-flex justify-content-between align-items-center">
                                        <div class="text-truncate app-list-title">How To Set Intentions That Energize You</div>
                                        <div class="pl-3 d-flex">
                                            <span class="text-nowrap text-muted">15 July</span>
                                            <div class="dropdown ml-3">
                                                <a href="#" class="btn btn-outline-light btn-sm" data-toggle="dropdown">
                                                    <i class="fa fa-ellipsis-v"></i>
                                                </a>
                                                <div class="dropdown-menu dropdown-menu-right">
                                                    <a class="dropdown-item" href="#">Reply</a>
                                                    <a class="dropdown-item" href="#">Add star</a>
                                                    <a class="dropdown-item" href="#">Add label</a>
                                                    <div class="dropdown-divider"></div>
                                                    <a class="dropdown-item text-danger" href="#">Delete</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="text-muted d-flex justify-content-between">
                                        <div class="text-truncate small">Hey John, bah kivu decrete epanorthotic
                                            unnotched
                                            Argyroneta nonius veratrine preimaginary.
                                        </div>
                                        <div class="text-nowrap pl-3">
                                            <ul class="list-inline">
                                                <li class="list-inline-item mb-0">
                                                    <i class="fa fa-circle text-danger"></i>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <!-- end::app-lists -->

                    <!-- begin:app-detail -->
                    <div class="card app-detail">
                        <div class="card-header">
                            <div class="app-detail-action-left">
                                <a class="app-detail-close-button" href="#">
                                    <i data-feather="arrow-left" class="mr-3"></i>
                                </a>
                                <h5 class="mb-0">
                                    Advertising Internet Online
                                    <span class="badge bg-success badge-pill ml-1">Freelance</span>
                                </h5>
                            </div>
                            <div class="app-detail-action-right">
                                <div>
                                    <a href="#" class="btn btn-outline-light" data-toggle="tooltip" title="Reply">
                                        <i data-feather="corner-up-left"></i>
                                    </a>
                                    <a href="#" class="btn btn-outline-light ml-2" data-toggle="tooltip"
                                       title="Mark as spam">
                                        <i data-feather="info"></i>
                                    </a>
                                    <a href="#" class="btn btn-outline-light ml-2" data-toggle="tooltip"
                                       title="Dispose">
                                        <i data-feather="trash"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="app-detail-article">
                            <div class="card-body">
                                <div class="d-flex align-items-center p-l-r-0 m-b-20">
                                    <div class="d-flex align-items-center">
                                        <figure class="avatar avatar-sm m-r-15">
                                            <img src="assets/media/image/user/women_avatar5.jpg" class="rounded-circle"
                                                 alt="image">
                                        </figure>
                                        <div>
                                            <h6 class="m-b-0">
                                                <span class="text-primary">Valentine Maton</span>
                                                <span class="d-sm-inline d-none text-muted"> &lt;elnora@gmail.com&gt;</span>
                                            </h6>
                                            <span class="small text-muted">to Lois Jimenez</span>
                                        </div>
                                    </div>
                                    <div class="ml-auto">
                                        <a href="#" data-toggle="tooltip" title="Attachment" class="mr-2">
                                            <i class="fa fa-paperclip"></i>
                                        </a>
                                        <a href="#" class="mr-2">
                                            <i class="fa fa-star font-size-16 text-warning"></i>
                                        </a>
                                        <span class="text-muted">4:14 AM</span>
                                    </div>
                                </div>
                                <p>Greetings!</p>
                                <p>It is a long established fact that a reader will be distracted by the readable
                                    content of
                                    a page when looking at its layout.The point of using Lorem Ipsum is that it has a
                                    more-or-less normal distribution of letters, as opposed to using 'Content here,
                                    content
                                    here',making it look like readable English.</p>
                                <p>There are many variations of passages of Lorem Ipsum available, but the majority have
                                    suffered alteration in some form, by injected humour, or randomised words which
                                    don't
                                    look even slightly believable.</p>
                                <p>Sincerely yours,</p>
                                <p>
                                    <strong>Envato Design Team</strong>
                                </p>
                            </div>
                            <hr class="m-0">
                            <div class="card-body">
                                <h6 class="mb-3 font-size-11 text-uppercase">Attached Files</h6>
                                <ul class="list-unstyled mb-0">
                                    <li class="small">
                                        <a href="#">
                                            <i data-feather="paperclip" class="mr-1 width-15 height-15"></i>
                                            uikit-design.psd
                                        </a>
                                    </li>
                                    <li class="small">
                                        <a href="#">
                                            <i data-feather="paperclip" class="mr-1 width-15 height-15"></i>
                                            uikit-design.sketch
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <hr class="m-0">
                            <div class="card-body">
                                <h6 class="mb-3 font-size-11 text-uppercase">Reply</h6>
                                <div class="reply-email-quill-editor mb-3"></div>
                                <div class="d-flex justify-content-between">
                                    <div class="reply-email-quill-toolbar">
                                        <span class="ql-formats mr-0">
                                          <button class="ql-bold"></button>
                                          <button class="ql-italic"></button>
                                          <button class="ql-underline"></button>
                                          <button class="ql-link"></button>
                                          <button class="ql-image"></button>
                                        </span>
                                    </div>
                                    <button class="btn btn-primary">
                                        <i data-feather="send" class="mr-2"></i>
                                        Send
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </main>
    <!-- end::main-content -->

    <!-- begin::footer -->
    <footer>
        <div class="container-fluid">
            <div>© 2019 Protable v1.0.0 Made by <a href="http://laborasyon.com">Laborasyon</a></div>
            <div>
                <nav class="nav">
                    <a href="https://themeforest.net/licenses/standard" class="nav-link">Licenses</a>
                    <a href="#" class="nav-link">Change Log</a>
                    <a href="#" class="nav-link">Get Help</a>
                </nav>
            </div>
        </div>
    </footer>
    <!-- end::footer -->

</div>
<!-- end::main -->

<div class="modal fade" tabindex="-1" role="dialog" id="compose">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Compose Email</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i class="ti-close"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="d-flex justify-content-between m-b-20">
                    <div>
                        <a href="#" data-toggle="tooltip" title=""
                           class="btn btn-outline-light btn-sm mr-2"
                           data-original-title="Keep">
                            <i data-feather="save"></i>
                        </a>
                        <a href="#" data-toggle="tooltip" title=""
                           class="btn btn-outline-light btn-sm mr-2"
                           data-original-title="Delete">
                            <i data-feather="trash-2"></i>
                        </a>
                    </div>
                </div>
                <form>
                    <div class="form-group">
                        <input type="text" class="form-control tagsinput" placeholder="To"
                               value="example@test.com.tr" required>
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Subject" required>
                    </div>
                    <div class="form-group">
                        <div class="custom-file">
                            <input type="file" class="custom-file-input" multiple id="customFileLangHTML">
                            <label class="custom-file-label" for="customFileLangHTML" data-browse="Select files">Voeg je document toe</label>
                        </div>
                    </div>
                    <div>
                        <div class="compose-quill-editor mb-3"></div>
                        <div class="d-flex justify-content-between">
                            <div class="compose-quill-toolbar">
                            <span class="ql-formats mr-0">
                                <button class="ql-bold"></button>
                                <button class="ql-italic"></button>
                                <button class="ql-underline"></button>
                                <button class="ql-link"></button>
                                <button class="ql-image"></button>
                            </span>
                            </div>
                            <button class="btn btn-primary">
                                <i data-feather="send" class="mr-2"></i>
                                Send
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Plugin scripts -->
<script src="vendors/bundle.js"></script>

<!-- Tagsinput -->
<script src="vendors/tagsinput/bootstrap-tagsinput.js"></script>
<script src="assets/js/examples/tagsinput.js"></script>

<!-- quill -->
<script src="vendors/quill/quill.js"></script>

<!-- App scripts -->
<script src="assets/js/app.min.js"></script>

<script>
    new Quill('.compose-quill-editor', {
        modules: {
            toolbar: ".compose-quill-toolbar"
        },
        placeholder: "Type something... ",
        theme: "snow"
    });

    new Quill('.reply-email-quill-editor', {
        modules: {
            toolbar: ".reply-email-quill-toolbar"
        },
        placeholder: "Type something... ",
        theme: "snow"
    });

    $(function () {
        $(document).on('click', '.app-block .app-content .app-action .action-left input[type="checkbox"]', function () {
            $('.app-lists ul li input[type="checkbox"]').prop('checked', $(this).prop('checked'));
            if ($(this).prop('checked')) {
                $('.app-lists ul li input[type="checkbox"]').closest('li').addClass('active');
            } else {
                $('.app-lists ul li input[type="checkbox"]').closest('li').removeClass('active');
            }
        });

        $(document).on('click', '.app-lists ul li input[type="checkbox"]', function () {
            if ($(this).prop('checked')) {
                $(this).closest('li').addClass('active');
            } else {
                $(this).closest('li').removeClass('active');
            }
        });

        $(document).on('click', '.app-block .app-content .app-content-body .app-lists ul.list-group li.list-group-item', function (e) {
            if (!$(e.target).is('.custom-control, .custom-control *, a, a *')) {
                $('.app-detail').addClass('show').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function () {
                    $('.app-block .app-content .app-content-body .app-detail .app-detail-article').niceScroll().resize();
                });
            }
        });

        $(document).on('click', 'a.app-detail-close-button', function () {
            $('.app-detail').removeClass('show');
            return false;
        });

        $(document).on('click', '.app-sidebar-menu-button', function () {
            $('.app-block .app-sidebar, .app-content-overlay').addClass('show');
            // $('.app-block .app-sidebar .app-sidebar-menu').niceScroll().resize();
            return false;
        });

        $(document).on('click', '.app-content-overlay', function () {
            $('.app-block .app-sidebar, .app-content-overlay').removeClass('show');
            return false;
        });
    });
</script>

</body>
</html>